<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { UpdatePassword } from '../api/index';
import { showSuccessToast, showFailToast, showLoadingToast } from 'vant';
const router = new useRouter();
const onClickLeft = () => router.back();
const repassword = ref('');
const password = ref('');
const onSubmit = () => {
    console.log(password.value);
    if (password.value != repassword.value) {
        showFailToast('两次输入的密码不一样');
    } else {
        UpdatePassword({
            password: password.value
        })
            .then(function () {
                showLoadingToast({
                    message: '正在修改...',
                    forbidClick: true,
                });
                setTimeout(() => {
                    password.value='';
                    repassword.value='';
                    showSuccessToast('修改密码成功');
                }, 1000);
            })
            .catch(function (error) {
                console.log(error);
            })

    }
};
</script>

<template>
    <div class="">
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmit">
            <van-cell-group style="margin-top: 30px;" inset>
                <van-field style="font-size:18px; font-weight: 547;" v-model="password" type="password" name="新密码"
                    label="新密码" placeholder="请输入新密码" :rules="[{ required: true, message: '请填写新密码' }]" />
                <van-field style="font-size:18px; font-weight: 547;" v-model="repassword" type="password" name="确认密码"
                    label="确认密码" placeholder="再次输入密码" :rules="[{ required: true, message: '请填写新密码' }]" />
            </van-cell-group>
            <div style="margin-top: 50px; margin-left: 16px; margin-right: 16px">
                <van-button style="font-size:18px; font-weight: 547;" round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<style lang="scss" scoped></style>
